<template>
  <div>
    <h1>TensorFlow.js Object Detection</h1>
    <select id="base_model">
      <option value="lite_mobilenet_v2">SSD Lite Mobilenet V2</option>
      <option value="mobilenet_v1">SSD Mobilenet v1</option>
      <option value="mobilenet_v2">SSD Mobilenet v2</option>
    </select>
    <button type="button" id="run">Run</button>
    <button type="button" id="toggle">Toggle Image</button>
    <div>
      <img id="image" />
      <canvas id="canvas" width="600" height="399"></canvas>
    </div>
  </div>
</template>

<script>
import "@tensorflow/tfjs-backend-cpu";
import "@tensorflow/tfjs-backend-webgl";

import * as cocoSsd from "@tensorflow-models/coco-ssd";

import imageURL from "./image1.jpg";
import image2URL from "./image2.jpg";

export default {
  //识别算法，调用别人的
  async mounted() {
    let modelPromise;

    await (modelPromise = cocoSsd.load());

    const button = document.getElementById("toggle");
    button.onclick = () => {
      image.src = image.src.endsWith(imageURL) ? image2URL : imageURL;
    };

    const select = document.getElementById("base_model");
    select.onchange = async (event) => {
      const model = await modelPromise;
      model.dispose();
      modelPromise = cocoSsd.load({
        base: event.srcElement.options[event.srcElement.selectedIndex].value,
      });
    };

    const image = document.getElementById("image");
    image.src = imageURL;

    const runButton = document.getElementById("run");
    runButton.onclick = async () => {
      const model = await modelPromise;
      console.log("model loaded");
      console.time("predict1");
      const result = await model.detect(image);
      console.log(result,"预测结果")
      console.timeEnd("predict1");

      const c = document.getElementById("canvas");
      const context = c.getContext("2d");
      context.drawImage(image, 0, 0);
      context.font = "10px Arial";

      console.log("number of detections: ", result.length);
      for (let i = 0; i < result.length; i++) {
        context.beginPath();
        context.rect(...result[i].bbox);
        context.lineWidth = 1;
        context.strokeStyle = "green";
        context.fillStyle = "green";
        context.stroke();
        context.fillText(
          result[i].score.toFixed(3) + " " + result[i].class,
          result[i].bbox[0],
          result[i].bbox[1] > 10 ? result[i].bbox[1] - 5 : 10
        );
      }
    };
  },
};
</script>

<style lang="scss" scoped></style>
